<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html" charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="chrome=1" />
	<meta name="keywords" content="设计"/>
	<meta name="author" content="Etisan"/>
	<meta name="robots" content="all"/>
	<title data-vue-meta="true">Capsule设计导航</title>
	<link rel="icon" href="img/logo.png" type="image/png">
	<link rel="apple-touch-icon" href="img/logo.png">
	<link rel="shortcut icon" href="img/logo.png" />
	<meta name="mobile-web-app-capable" content="yes">
   	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
   	<meta http-equiv="X-UA-Compatible" content="ie=edge">
   	<link rel="stylesheet" href="css/bootstrap.min.css" />
   	<link rel="stylesheet" type="text/css" href="css/index.css"/>
   	<script type="text/javascript" src="js/jquery-2.1.1.min.js" ></script>
	<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body ondragstart="return false" ontouchstar>
<header>
<nav class="navbar">
		<a href="index.html"><div align="center" data-in="swing"><img src="img/logo-group.png" srcset="img/logo-group@2x.png 2x" /></div></a>
		<h5>胶囊设计导航</h5>

		<div class="navlist">
			<ul>
				<li><a href="#mark0" id="0">素&nbsp;材</a></li>
				<li><a href="#mark1" id="1">Web</a></li>
				<li><a href="#mark2" id="2">UI/UX</a></li>
				<li><a href="#mark3" id="3">排&nbsp;版</a></li>
				<li><a href="#mark4" id="4">icon</a></li>
				<li><a href="#mark5" id="5">摄&nbsp;影</a></li>
				<li><a href="#mark6" id="6">社&nbsp;区</a></li>
				<li><a href="#mark7" id="7">配&nbsp;色</a></li>
			</ul>
		</div>

		<footer class="footer">powered by@<a href="https://git.oschina.net/Etisan/capsule" target="_blank" style="display: inline;color: #A0A0A0;">Etisan</a></footer>
</nav>


<nav class="nav-phone navbar-default navbar-fixed-top">
	<div class="container">
		<div align="center" class="navbar-header">
			<span style="color: #556fb5;font-size: 26px;line-height: 45px;">Capsule</span>
			<span style="font-size: 16px;">&nbsp;Design</span>
			<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button>
		</div>
		<div class="collapse navbar-collapse" id="navbar-collapse">

			<ul class="nav navbar-nav navbar-right">

				<li><a href="#mark0" id="0">素&nbsp;材</a></li>
				<li><a href="#mark1" id="1">Web</a></li>
				<li><a href="#mark2" id="2">UI/UX</a></li>
				<li><a href="#mark3" id="3">排&nbsp;版</a></li>
				<li><a href="#mark4" id="4">icon</a></li>
				<li><a href="#mark5" id="5">摄&nbsp;影</a></li>
				<li><a href="#mark6" id="6" style="z-index: 9;">社&nbsp;区</a></li>
				<li><a href="#mark7" id="7" style="z-index: 9;">配&nbsp;色</a></li>
				<img style="height: 100px;margin-top: -100px;filter：alpha(opacity=20);opacity:0.2;" src="img/logo-group@2x.png" />
				<!--添加透明背景Logo-->
			</ul>
		</div>
	</div>
</nav>
</header>




<div class="designgroup container-fluid">
	<div class="say">
		本站正在搭建中，如果你有好的设计网站资源，欢迎私信
		<img src="img/mail.png"/>
		<a href="mailto:etisan@foxmail.com">Etisan@foxmail.com</a>&nbsp;&nbsp;推荐哦~
	</div>

<figure id="mark0">
	<div class="container-fluid">
		<h3>素材</h3>
		<div align="center" class="row">

			<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
				<div class="capsule">
					<a href="https://huaban.com/" target="_blank">
						<div class="capsule-left" style="background: #e3162a;">
							<div align="center" class="icon" style="margin-top: 20px;" ><img src="img/huaban.png"></div>
						</div>
						<div class="capsule-right">花 瓣</div>
					</a>
				</div>
			</div>

			<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
				<div class="capsule">
					<a href="https://www.pinterest.com/" target="_blank">
					<div class="capsule-left" style="background: #cc2127;">
						<div align="center" class="icon" style="margin-top: 20px;" ><img src="img/pinterest@2x.png"></div>
					</div>
					<div class="capsule-right">Pinterest</div>
					</a>
				</div>
			</div>

			<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
				<div class="capsule">
					<a href="https://niice.co/" target="_blank">
						<div class="capsule-left" style="background: #212121;">
							<div align="center" class="icon" style="margin-top: 20px;" ><img src="img/niice.png"></div>
						</div>
						<div class="capsule-right">Niice</div>
					</a>
				</div>
			</div>

			<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
				<div class="capsule">
				<a href="https://www.behance.net/" target="_blank">
					<div class="capsule-left" style="background: #0c7edf;">
						<div align="center" class="icon" style="margin-top: 20px;" ><img src="img/behance.png"></div>
					</div>
					<div class="capsule-right">Behance</div>
				</a>
				</div>
			</div>

		</div>
	</div>
</figure>



<figure id="mark1">
	<div class="container-fluid">
		<h3>Web</h3>
		<div align="center" class="row">

			<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
				<div class="capsule">
					<a href="http://lapa.ninja/" target="_blank">
						<div class="capsule-left" style="background: #6964cd;">
							<div align="center" class="icon" style="margin-top: 20px;" ><img src="img/lapa.png"></div>
						</div>
						<div class="capsule-right">Lapa</div>
					</a>
				</div>
			</div>

			<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
				<div class="capsule">
				<a href="https://bestwebsite.gallery/" target="_blank">
					<div class="capsule-left" style="background: #006fff;">
						<div align="center" class="icon" style="margin-top: 20px;" ><img style="height: 50px;margin-top: 21px;" src="img/BWG.png"></div>
					</div>
					<div class="capsule-right">BWG</div>
				</a>
				</div>
			</div>

			<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
				<div class="capsule">
				<a href="https://thefwa.com/" target="_blank">
					<div class="capsule-left" style="background: #000000;">
						<div align="center" class="icon" style="margin-top: 20px;" ><img style="height: 20px;margin-top: 35px;" src="img/fwa.png"></div>
					</div>
					<div class="capsule-right">FWA</div>
				</a>
				</div>
			</div>

		</div>
	</div>
</figure>

<figure  id="mark2">
	<div class="container-fluid">
		<h3>UI/UX</h3>
		<div align="center" class="row">

			<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
				<div class="capsule">
				<a href="https://dribbble.com/" target="_blank">
					<div class="capsule-left" style="background: #e94c88;">
						<div align="center" class="icon" style="margin-top: 20px;" ><img src="img/dribbble.ico"></div>
					</div>
					<div class="capsule-right">Dribbble</div>
				</a>
				</div>
			</div>

			<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
				<div class="capsule">
				<a href="https://uigarage.net/" target="_blank">
					<div class="capsule-left" style="background: rgb(29,29,29);">
						<div align="center" class="icon" style="margin-top: 20px;" ><img src="img/UIGarage@2x.png"></div>
					</div>
					<div class="capsule-right">UIGarage</div>
				</a>
				</div>
			</div>

		</div>
	</div>
</figure>

<figure  id="mark3">
	<div class="container-fluid">
		<h3>排版</h3>
		<div align="center" class="row">

			<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
				<div class="capsule">
					<a href="https://www.canva.com/" target="_blank">
						<div class="capsule-left" style="background: #00c4cc;">
							<div align="center" class="icon" style="margin-top: 20px;" ><img style="height: 60px;margin-top: 16px;" src="img/canva@2x.png"></div>
						</div>
						<div class="capsule-right">Canva</div>
					</a>
				</div>
			</div>

			<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
				<div class="capsule">
				<a href="http://hellohappy.org/beautiful-web-type/" target="_blank">
					<div class="capsule-left" style="background: #2a2c39;">
						<div align="center" class="icon" style="margin-top: 20px;" ><img src="img/hellohappy.png"></div>
					</div>
					<div class="capsule-right">hellohappy</div>
				</a>
				</div>
			</div>

		</div>
	</div>
</figure>

<figure  id="mark4">
	<div class="container-fluid">
		<h3>icon</h3>
		<div align="center" class="row">

			<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
				<div class="capsule">
					<a href="http://iconfont.cn/" target="_blank">
						<div class="capsule-left" style="background: rgb(255,66,0);">
							<div align="center" class="icon" style="margin-top: 20px;" ><img src="http://gtms04.alicdn.com/tps/i4/TB1_oz6GVXXXXaFXpXXJDFnIXXX-64-64.ico"></div>
						</div>
						<div class="capsule-right">Iconfont</div>
					</a>
				</div>
			</div>

			<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
				<div class="capsule">
					<a href="https://thenounproject.com/" target="_blank">
						<div class="capsule-left" style="background: #fafafa;">
							<div align="center" class="icon" style="margin-top: 20px;" ><img src="img/NounProject.png"></div>
						</div>
						<div class="capsule-right">NounProject</div>
					</a>
				</div>
			</div>

			<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
				<div class="capsule">
				<a href="https://medialoot.com/icons/" target="_blank">
					<div class="capsule-left" style="background: #58595e;">
						<div align="center" class="icon" style="margin-top: 20px;" ><img src="img/medialoot.png"></div>
					</div>
					<div class="capsule-right">Medialoot</div>
				</a>
				</div>
			</div>

			<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
				<div class="capsule">
				<a href="http://dbfreebies.co/icons" target="_blank">
					<div class="capsule-left" style="background: #5a4d81;">
						<div align="center" class="icon" style="margin-top: 20px;" ><img style="height: 24px;margin-top: 33px;" src="img/DBF.png"></div>
					</div>
					<div class="capsule-right">DBF</div>
				</a>
				</div>
			</div>

			<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
				<div class="capsule">
					<a href="http://www.flaticon.com/" target="_blank">
					<div class="capsule-left" style="background: #58696a;">
						<div align="center" class="icon" style="margin-top: 20px;" ><img src="img/flaticon.png"></div>
					</div>
					<div class="capsule-right">Flaticon</div>
					</a>
				</div>
			</div>

			<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
				<div class="capsule">
					<a href="https://iconmonstr.com/" target="_blank">
					<div class="capsule-left" style="background: #000000;">
						<div align="center" class="icon" style="margin-top: 20px;" ><img src="img/iconmonstr.png"></div>
					</div>
					<div class="capsule-right">Iconmonstr</div>
					</a>
				</div>
			</div>

			<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
				<div class="capsule">
					<a href="https://www.iconfinder.com/" target="_blank">
					<div class="capsule-left" style="background: #242424;">
						<div align="center" class="icon" style="margin-top: 20px;" ><img src="img/iconfinder.svg"></div>
					</div>
					<div class="capsule-right">Iconfinder</div>
					</a>
				</div>
			</div>

		</div>
	</div>
</figure>


<figure  id="mark5">
	<div class="container-fluid">
		<h3>摄影</h3>
		<div align="center" class="row">

			<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
				<div class="capsule">
					<a href="https://unsplash.com/" target="_blank">
						<div class="capsule-left" style="background: #DDDDDD;">
							<div align="center" class="icon" style="margin-top: 20px;" ><img src="img/unsplash.png"></div>
						</div>
						<div class="capsule-right">unsplash</div>
					</a>
				</div>
			</div>

			<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
				<div class="capsule">
				<a href="https://visualhunt.com/" target="_blank">
					<div class="capsule-left" style="background: #29221f;">
						<div align="center" class="icon" style="margin-top: 20px;" ><img style="height: 15px;margin-top: 36px;" src="img/visualhunt.png"></div>
					</div>
					<div class="capsule-right">visualhunt</div>
				</a>
				</div>
			</div>

			<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
				<div class="capsule">
				<a href="http://www.gratisography.com/" target="_blank">
					<div class="capsule-left" style="background: #00a3e4;">
						<div align="center" class="icon" style="margin-top: 20px;" ><img style="height: 70px;margin-top: 10px;" src="img/gratisography.png"></div>
					</div>
					<div class="capsule-right">gratisography</div>
				</a>
				</div>
			</div>

			<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
				<div class="capsule">
					<a href="https://www.pexels.com/" target="_blank">
					<div class="capsule-left" style="background: #c3906b;">
						<div align="center" class="icon" style="margin-top: 20px;" ><img src="img/pexels.png"></div>
					</div>
					<div class="capsule-right">Pexels</div>
					</a>
				</div>
			</div>

		</div>
	</div>
</figure>

<figure  id="mark6">
	<div class="container-fluid">
		<h3>社区</h3>
		<div align="center" class="row">

			<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
				<div class="capsule">
				<a href="http://www.zcool.com.cn/" target="_blank">
					<div class="capsule-left" style="background: rgb(255,173,0);">
						<div align="center" class="icon" style="margin-top: 20px;" ><img src="img/zcool.png"></div>
					</div>
					<div class="capsule-right">站酷</div>
				</a>
				</div>
			</div>

			<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
				<div class="capsule">
				<a href="http://www.ui.cn/" target="_blank">
					<div class="capsule-left" style="background: #95d4ff;">
						<div align="center" class="icon" style="margin-top: 20px;" ><img src="img/uichina.png"></div>
					</div>
					<div class="capsule-right">UI中国</div>
				</a>
				</div>
			</div>

		</div>
	</div>
</figure>


<figure  id="mark7">
	<div class="container-fluid">
		<h3>配色</h3>
		<div align="center" class="row">

			<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
				<div class="capsule">
				<a href="http://www.flatuicolorpicker.com/" target="_blank">
					<div class="capsule-left" style="background: #ef4836;">
						<div align="center" class="icon" style="margin-top: 20px;" ><img src="img/flatui.png"></div>
					</div>
					<div class="capsule-right">Flat UI Color Picker</div>
				</a>
				</div>
			</div>

			<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
				<div class="capsule">
				<a href="https://www.behance.net/" target="_blank">
					<div class="capsule-left" style="background: #0055ff;">
						<div align="center" class="icon" style="margin-top: 20px;" ><img style="height: 110px;margin: -10px 0 0 0;" src="img/colordot@2x.png"></div>
					</div>
					<div class="capsule-right">Color dot</div>
				</a>
				</div>
			</div>

			<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
				<div class="capsule">
					<a href="http://colrd.com/" target="_blank">
					<div class="capsule-left" style="background: #ff8a00;">
						<div align="center" class="icon" style="margin-top: 20px;" ><img src="img/colrd-2.png"></div>
					</div>
					<div class="capsule-right">colrd</div>
					</a>
				</div>
			</div>

		</div>
	</div>
</figure>

</div>

<footer>
	<div class="blank"></div>
	<div class="footer-text-phone">Copyright&nbsp;&copy;2017&nbsp;&nbsp;&nbsp;Powered by@Etisan<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Capsule&nbsp;Design&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;胶囊设计导航</div>
	<div class="footer-text">Copyright&nbsp;&copy;2017&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Capsule&nbsp;Design&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;胶囊设计导航</div>
</footer>


<script>
 $(document).ready(function() {
$("#0,#1,#2,#3,#4,#5,#6,#7").click(function(){
    $("html, body").animate({
      scrollTop: $($(this).attr("href")).offset().top + "px"
    }, {
      duration: 500,
      easing: "swing",
    });
    return false;
  });
});

</script>

</body>
</html>
